﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "待检任务管理";
    Layout = null;
}
<link href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>
<style>
    .layui-table-cell {
        white-space: pre-line;
        word-break: break-all;
        max-width: 300px;
    }

    .layui-form-label {
        width: 110px;
    }

    .layui-input-block {
        margin-left: 140px;
    }

    .layui-layer-content .layui-form-item {
        margin-bottom: 18px;
    }

    .layui-btn-danger {
        background-color: #ff5722;
    }

    .layui-table-view .layui-table-empty {
        color: #999;
        font-size: 16px;
    }

    .search-form {
        padding: 15px;
        background-color: #f8f8f8;
        margin-bottom: 10px;
    }

    .search-form .layui-form-item {
        margin-bottom: 10px;
    }

    .search-form .layui-form-label {
        width: 80px;
    }

    .search-form .layui-input-block {
        margin-left: 110px;
    }
</style>

<div class="layui-card">
    <div class="layui-card-header">
        待检任务管理
    </div>
    <div class="layui-card-body">
        <!-- 搜索区域 -->
        <div class="search-form">
            <form class="layui-form" lay-filter="searchForm">
                <div class="layui-row">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">单据编码</label>
                            <div class="layui-input-block">
                                <input type="text" name="formCode" placeholder="请输入单据编码" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">物资名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="materialName" placeholder="请输入物资名称" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">检测类型</label>
                            <div class="layui-input-block">
                                <select name="testingItems">
                                    <option value="">请选择检测类型</option>
                                    <option value="过程检验">过程检验</option>
                                    <option value="来料检验">来料检验</option>
                                    <option value="成品检验">成品检验</option>
                                    <option value="出货检验">出货检验</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md12" style="text-align: center;">
                        <button type="button" class="layui-btn" id="btnSearch">
                            <i class="layui-icon">&#xe615;</i> 搜索
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary" id="btnReset">
                            <i class="layui-icon">&#xe669;</i> 重置
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 表格区域 -->
        <table id="pendingTaskTable" lay-filter="pendingTaskTable"></table>
    </div>
</div>

<!-- 表格操作工具栏 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="inspect">立即检验</a>
</script>

<script>
    layui.use(['table', 'form', 'layer'], function(){
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;

        // 渲染表格
        var tableIns = table.render({
            elem: '#pendingTaskTable',
            url: '/PendingTask/GetPendingTask',
            method: 'GET',
            page: true,
            request: {
                pageName: 'pageIndex',
                limitName: 'pageSize'
            },
            limits: [5, 10, 20, 100],
            limit: 10,
            text: {none: '暂无数据'},
            cols: [[
                {field: 'id', title: 'ID', width: 80, sort: true, hide: true},
                {field: 'formCode', title: '单据编码', minWidth: 150},
                {field: 'testingItems', title: '检测类型', width: 120, templet: function(d){
                    return '<span class="layui-badge layui-bg-blue">' + (d.testingItems || '') + '</span>';
                }},
                {field: 'materialCode', title: '物资编码', minWidth: 120},
                {field: 'materialName', title: '物资名称', minWidth: 150},
                {field: 'pendingNum', title: '待检数量', width: 100, align: 'center'},
                {field: 'position', title: '位置', minWidth: 120},
                {title: '操作', width: 120, toolbar: '#tableBar', fixed: 'right'}
            ]]
        });

        // 监听工具条
        table.on('tool(pendingTaskTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'inspect'){
                openInspectDialog(data);
            }
        });

        // 搜索按钮事件
        $('#btnSearch').on('click', function(){
            var formData = form.val('searchForm');
            tableIns.reload({
                where: formData,
                page: {
                    curr: 1
                }
            });
        });

        // 重置按钮事件
        $('#btnReset').on('click', function(){
            tableIns.reload({
                where: {},
                page: {
                    curr: 1
                }
            });
        });

        // 打开立即检验弹框
        function openInspectDialog(data) {
            // 打开检验弹框
            layer.open({
                type: 2,
                title: '立即检验',
                shadeClose: true,
                shade: 0.5,
                maxmin: true,
                area: ['900px', '700px'],
                content: '/PendingTask/InspectionDialog?pendingTaskId=' + data.id,
                end: function(){
                    // 刷新表格
                    tableIns.reload();
                }
            });
        }

        // 支持回车搜索
        $(document).on('keydown', function(e){
            if(e.keyCode === 13 && !$('.layui-layer').length){
                $('#btnSearch').click();
            }
        });
    });
</script>
